<template>
	<view class="card-menu">
		<view v-for="(value,item, index) in treeData" :key="item" v-if="item!=='visible'" class="card-menu">
			<!-- 一级目录循环 -->
			<uni-section class="mb-10" :title="item" @click="ChangeFirstStatus(item)">
				<template v-slot:right>
					<uni-icons :type="treeData[item].visible?'circle-filled':'circle'" size="14"></uni-icons>
				</template>
			</uni-section>
			<!-- 二级目录 -->
			<transition>
				<view v-if="treeData[item].visible">
					<view v-for="(value1,item1,index) in value" :key="item1" v-if="item1!=='visible'">
						<uni-section class="mb-10 indentcss" :title="item1" @click="ChangeSecStatus(item,item1)">
							<template v-slot:right>
								<uni-icons :type="treeData[item][item1].visible?'circle-filled':'circle'" size="14"></uni-icons>
							</template>
						</uni-section>
						<!-- 三级目录 -->
						<transition>
							<view v-if="treeData[item][item1].visible">
								<uni-collapse v-for="(value2,item2,index) in value1" :key="item2">
									<uni-collapse-item class="namefix" :title="item+item1+value2.roomNumber+'号房'">
										<view class="cardsec">
											<view class="cardtext">
												<text>
													宽带号为:{{value2.broadbandNumber}},宽带状态为:{{broadStatusTrans(value2.broadbandStatus)?"开通":"关闭"}}

													社区经理:{{value2.nickName}},联系电话:{{value2.phonenumber}}
												</text>
											</view>
											<button size="mini" @click="openBroadF(value2.dataId)" type="primary"
												:disabled="broadStatusTrans(value2.broadbandStatus)">申请开通</button>
											<button size="mini" @click="closeBroadF(value2.dataId)" type="warn"
												:disabled="!broadStatusTrans(value2.broadbandStatus)">申请关停</button>
										</view>


									</uni-collapse-item>
								</uni-collapse>
							</view>
						</transition>
					</view>
				</view>
			</transition>
		</view>

		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>

		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" :title="title" :content="content"
					@confirm="dialogConfirm" 
					@close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import {
		openBroad,
		closeBroad
	} from '@/api/broad/broadapi.js'
	export default {
		name: 'TrList',
		props: ['communityData'],
		data() {
			return {
				treeData: "",
				hideThrMenuStatus: 0,
				msgType: '',
				messageText: '这是一条成功提示',
				title:'',
				content:''

			}
		},
		watch: {
			communityData: {
				deep: true, // 深度监听每一个属性值, 如果是对象可以深度监听
				immediate: true, // 进入页面后立即自动调用handler函数
				handler(newValue) {
					Object.keys(newValue).forEach(res => {
						this.treeData = newValue
						this.$set(this.treeData, 'visible', false);
						// console.log(res, '----', newValue[res])
					})

					// console.log(this.treeData)
				}
			}
		},
		mounted() {
			console.log('treeData:', this.treeData)
		},
		computed: {

		},
		methods: {
			broadStatusTrans(e) {
				return e === "1" ? true : false
			},
			/**
			 * @Title 开通宽带
			 * @param {Object} dataID 数据编码
			 */
			openBroadF(dataID) {
				this.msgType='success'
				this.title = "确认申请开通宽带"
				this.content = "是否确认申请开通宽带"
				this.$refs.alertDialog.open()
				openBroad(dataID).then(res => {
					this.messageText = res.msg
				})
			},
			/**
			 * @Title 关停宽带
			 * @param {Object} dataID 数据编码
			 */
			closeBroadF(dataID) {
				this.msgType='warn'
				this.title = "确认申请关停宽带"
				this.content = "是否确认申请关停宽带"
				this.$refs.alertDialog.open()
				closeBroad(dataID).then(res => {
					this.messageText = res.msg
				})
			},
			/**
			 * @title 弹出确认框
			 */
			dialogConfirm() {
				console.log();	
				this.$refs.message.open()
			},
			/**
			 * @title 关闭弹窗
			 * @param {Object} item
			 */
			dialogClose() {
				console.log('点击关闭')
			},
			/**
			 * @title 改变二级目录展开折叠
			 */
			ChangeFirstStatus(item) {
				this.$set(this.treeData[item], 'visible', !this.treeData[item].visible);
				// console.log(this.treeData[item].visible)
				if (this.treeData[item].visible) {
					// 关闭二级目录和三级目录
					for (let key in this.treeData[item]) {
						if (key !== 'visible' && typeof this.treeData[item][key] === 'object') {
							// 如果是对象，则设置其 visible 属性为 false
							this.$set(this.treeData[item][key], 'visible', false);
							// 如果还有三级目录，需要进一步关闭
							for (let subKey in this.treeData[item][key]) {
								if (subKey !== 'visible' && typeof this.treeData[item][key][subKey] === 'object') {
									this.$set(this.treeData[item][key][subKey], 'visible', false);
								}
							}
						}
					}
				}
			},
			/**
			 * @title 改变三级目录暂开折叠
			 * @param {Object} item
			 * @param {Object} item1
			 */
			ChangeSecStatus(item, item1) {
				this.$set(this.treeData[item][item1], 'visible', !this.treeData[item][item1].visible);
				console.log(this.treeData[item][item1].visible)
				// console.log(this.treeData[item][item1].visible)
			}
		}
	}
</script>

<style>
	button {
		margin-right: 5px;
		float: right;
		text-align: center;
		border: solid 1px #f8f8f8;
	}

	.card-menu {
		width: 100%;
	}

	.mb-10 {
		margin-bottom: 1px;
	}

	.indentcss {
		text-indent: 15px;
	}

	.indentcss3 {
		text-indent: 30px;
	}

	.cardsec {
		padding-bottom: 55px;
		padding-top: 10px;
	}

	.floatstyle {
		float: right;
	}

	.buttonstyle {
		margin-bottom: 20px;
	}

	.cardtext {
		margin-bottom: 20px;
		padding-left: 30px;

	}

	::v-deep .uni-collapse-item__title-text {
		text-indent: 30px !important;
		text-decoration: none;
		font-weight: normal;

	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.5s;
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}
</style>